<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
</head>
<body>
<script>
    /*DOM   Document Object Mode文档对象模型 JS中通过DOM对HTML文档进行操作
    *   文档:整个HTML网页文档
    *   对象:网页中的每一个部分都转换为一个对象
    *   模型:使用模型来表示对象之间的关系，这样便于我们获取对象
    * 节点 (Node)是构成网页最基本的部分，网页的每一个部分都是一个节点 类型不同 属性和方法也不同
    *       分类:1.文档节点 整个HTML文档
    *            2.元素节点 HTML标签
    *            3.属性节点 元素的属性
    *            4.文本节点 html标签中的文本内容
    *           比如<p class="container">欢迎来到西藏</p>
    *           p                       元素节点
    *           class="container"       属性节点
    *           欢迎来到西藏             文本节点
    *  每个节点都具有三个属性
    *                   NodeName   NodeType  NodeValue
    *       文档节点    #document    9         null
    *       元素节点    标签名       1         null
    *       属性节点    属性名       2         属性值
    *       文本节点    #text       3         ★文本内容
    *       浏览器为我们提供了文档节点 这个对象的属性就是window属性
    *       可以在页面中直接使用文档节点代表的是整个网页document
    * */

</script>
<hr>

<button id="btn">我是一个按钮</button>
<script>
    // document.write("熊大熊二");
  // console.log(document) ;//返回#document
  //获取button对象
   var btn=document.getElementById("btn");
   // console.log(btn);//获取到了<button id="btn">I am button</button>
   //  //修改btn的文字
   //  console.log(btn.innerHTML);//我是一个按钮
   btn.innerHTML="I am button";//把我是一个按钮 修改为I am button
     //var btn=document.getElementById("btn"); btn.innerHTML="I am button";
    // ==document.getElementById("btn").innerHTML="I am button";
</script>

<hr>
<table border="1px" cellspacing="0px" >
    <tr align="center" >
        <td colspan="4">节点Node</td>
    </tr>
    <tr>
        <td></td>
        <td>NodeName</td>
        <td>NodeType</td>
        <td>NodeValue</td>
    </tr>
    <tr align="center">
        <td>文档节点</td>
        <td>#document</td>
        <td>9</td>
        <td>null</td>
    </tr>
    <tr align="center">
        <td>元素节点</td>
        <td>标签名</td>
        <td>1</td>
        <td>null</td>
    </tr>
    <tr align="center">
        <td>属性节点</td>
        <td>属性名</td>
        <td>2</td>
        <td>属性值</td>
    </tr>
    <tr align="center">
        <td>文本节点</td>
        <td>#text</td>
        <td>3</td>
        <td>★文本内容</td>
    </tr>
</table>

</body>
</html>